<script setup lang="ts">
import {
  FlashOutline, ChatboxEllipses, AtCircleSharp
} from '@vicons/ionicons5'
import { useRouter } from 'vue-router';
import { provide, CSSProperties, nextTick } from 'vue'
import { setWinSizeKey, setSearchTagKey } from './model/type'
import { InputInst } from 'naive-ui'


const router = useRouter()

import { ref, onMounted, reactive } from 'vue'
import { appWindow, LogicalSize } from "@tauri-apps/api/window";
// const unlisten = await appWindow.onResized(({ payload: size }) => {
//   console.log('Window resized', size);
// });

const handleWinSize = async () => {

  //alert('haha')
  //const w = document.getElementById('main')!.clientWidth
  const h = document.getElementById('main')!.clientHeight
  const sinputh = document.getElementById('search')!.clientHeight
  await appWindow.setSize(new LogicalSize(800, h + sinputh + 20));
}
const tagShow = reactive({ 'show': false, 'label': '' })
const handleTag = async (label: string) => {
  searchText.value = ""
  placeholder_desc.value = ""
  tagShow.show = true
  tagShow.label = label
}
const tagClose = () => {
  placeholder_desc.value = 'Hi,Mems搜索'
  tagShow.show = false
  router.push('/')
}
provide(setWinSizeKey, handleWinSize)
provide(setSearchTagKey, handleTag)
const lightThemeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#6e35ae',
    primaryColorHover: '#3d1d61',
    textColorBase: '#6e35ae'
  },
  Button: {
    textColor: '#FF0000',
  },
  Input: {
    // color: '#6e35c0',
    // colorFocus: '#6e35c0'
  }

}
const darkThemeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#6e35ae',
    primaryColorHover: '#3d1d61',
    textColorBase: '#ffffff'
  },
  Button: {
    textColor: '#FF0000',
  },
  Input: {
    color: '#2f2f2f',
    textColor: '#ffffff',
    colorFocus: '2f2f2f',

  },
  Card: {
    color: '#2f2f2f',
    textColor: '#ffffff'
  }

  // ...
}

const searchText = ref("")
const searchHandler = (value: string) => {
  if (value.length > 0)
    router.push('/searchResult')
  else
    router.push('/')

}
const routerview = ref<HTMLElement>()
const searchRef = ref<InputInst | null>(null)

const myheadClick = () => {
  //alert(1)
  //router.push('/myAccount')
  router.push('/myInfos')
}
onMounted(() => {
  //searchRef.value?.wrapperElRef?.outerText
})



const railStyle = ({
  focused,
  checked
}: {
  focused: boolean
  checked: boolean
}) => {
  const style: CSSProperties = {}
  if (checked) {
    style.background = '#d03050'
    if (focused) {
      style.boxShadow = '0 0 0 2px #d0305040'
    }
  } else {
    style.background = '#2080f0'
    if (focused) {
      style.boxShadow = '0 0 0 2px #2080f040'
    }
  }
  return style
}
const placeholder_desc = ref("Hi,Mems搜索")
const type_search = ref(true)
const setSearchType = () => {
  type_search.value = !type_search.value

}


import { NConfigProvider, type GlobalThemeOverrides } from 'naive-ui'
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// import Greet from "./components/Greet.vue";
</script>

<template>
  <n-config-provider :theme-overrides="lightThemeOverrides" data-tauri-drag-region
    style="width: 100%;border-radius: 5px;">
    <n-message-provider style="height: 100%;">
      <n-space style="border-radius: 10px;" data-tauri-drag-region vertical align="center">
        <n-space data-tauri-drag-region justify="center" align="start" style="margin-top: 10px;width: 100%;">
          <!-- <n-switch :rail-style="railStyle">
            <template #checked>
              AI
            </template>
            <template #unchecked>
              搜索ge to a new mem
            </template>
          </n-switch> -->
          <n-input ref="searchRef" id="search" v-model:value="searchText" class="searchInput" data-tauri-drag-region
            style="text" :placeholder="placeholder_desc" @update:value="searchHandler" size="large">
            <template #prefix>
              <n-button @click="setSearchType" strong secondary circle type="error">
                <template #icon>
                  <n-icon v-if="type_search" size="20" color="#3d1d61">
                    <ChatboxEllipses />
                  </n-icon>
                  <n-icon v-if="!type_search" size="20" color="#3d1d61">
                    <AtCircleSharp />
                  </n-icon>
                </template>
              </n-button>

              <n-tag type="primary" v-if="tagShow.show" closable @close="tagClose">{{ tagShow.label }}</n-tag>
            </template>
            <template #suffix>
              <n-avatar @click="myheadClick" round size="medium"
                src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
            </template>

          </n-input>
        </n-space>
        <div data-tauri-drag-region id="main">
          <RouterView style="width: 800px;" ref="routerview" data-tauri-drag-region></RouterView>
        </div>
      </n-space>
    </n-message-provider>
  </n-config-provider>
</template>

<style scoped>
.searchInput {

  border-radius: 5px;
  color: azure;
  border: 0px;
  width: 800px;
  --n-border: none;
  color: #6e35c0;
  --n-border-focus: none;
  --n-border-hover: none;
  --n-color-focus: #2f2f2f;
  --n-text-color: #fffefe;
}

.searchInput:focus {
  caret-color: #249b73;
  border: none;
  color: #249b73;
}



.logo.vite:hover {
  filter: drop-shadow(0 0 2em #747bff);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #249b73);
}
</style>
